<template>
  <!-- 物料收发明细表 -->
  <div class="materReceive">
    <div>
      <el-form :model="proVal" size="mini" label-width="100px">
        <el-form-item :label="$t('market.fmaterial')">
          <el-input v-model="proVal.fnumber" size="mini" />
        </el-form-item>
        <el-form-item :label="$t('market.stockplace')">
          <el-input v-model="proVal.positionname" />
        </el-form-item>
        <el-form-item :label="$t('market.stareData')">
          <el-date-picker
            v-model.trim="proVal.startTime"
            type="date"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item :label="$t('market.endData')">
          <el-date-picker
            v-model.trim="proVal.endTime"
            type="date"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label-width="50px">
          <el-button type="primary" size="mini" @click="handleGetUntreated">{{ $t('btn.search') }}</el-button>
          <el-button type="primary" size="mini" @click="handleExport">{{ $t('btn.toExcel') }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-content">
      <jc-table
        :table-data="tableData"
        :table-header="tableHeader"
        :table-height="tableHeight"
        serial
        sortable
        :get-summaries="getSummaries"
        show-summary
      >
        <!--    物料编码    -->
        <template v-slot:orderSlot="col">
          <el-link type="primary" @click="jumpMateriel(col.scope.row)">
            {{ col.scope.row.FNUMBER }}
          </el-link>
        </template>
      </jc-table>
    </div>
    <!--    分页器-->
    <div class="footer">
      <jc-pagination
        :total="total"
        :page.sync="currentPage"
        :limit.sync="size"
        @pagination="handleGetUntreated"
      />
    </div>
  </div>
</template>

<script>
import {
  queryStockQtylogList
} from '@/api/wms/stock'
import { export_json_to_excel, formatJson } from '@/utils/Export2Excel'

export default {
  props: {
    fnumber: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      proVal: {
        fnumber: '',
        positionname: '',
        endTime: '',
        startTime: ''
      },
      seleceVisiblit: false,
      total: 0, // 总条目
      currentPage: 1, // 当前页
      size: 200, // 每页显示多少条数据
      // 表头
      tableData: [], // 销售数据
      tableHeight: '73vh',
      tableHeader: [
        { label: this.$t('shop.fmodel'), prop: 'FMODEL', minWidth: '120' },
        { label: this.$t('shop.fnumber1'), type: 'order', prop: 'FNUMBER', width: '120' },
        { label: this.$t('shop.fname2'), prop: 'FMATERIALNAME', minWidth: '120' },
        { label: this.$t('shop.specifica'), prop: 'FSPECIFICATION', minWidth: '150px' },
        { label: this.$t('market.orderDate1'), prop: 'FDATE', minWidth: '120' },
        { label: this.$t('market.approveDate'), prop: 'FCREATETIME', minWidth: '120' },
        { label: this.$t('market.ordername'), prop: 'billtypeStr', width: '120' },
        { label: this.$t('market.billNo'), prop: 'FROMBILLNO', minWidth: '120' },
        { label: this.$t('market.stockplace'), prop: 'positionname', width: '150' },
        { label: this.$t('market.stockUnit'), prop: 'UNITNAME', width: '100' },
        { label: this.$t('market.beginNum'), prop: 'FORIQTY', align: 'right', width: '100px' },
        { label: this.$t('market.inQty'), prop: 'faddQty', align: 'right', width: '100px' },
        { label: this.$t('market.outQty'), prop: 'freduceQty', align: 'right', width: '100px' },
        { label: this.$t('market.resultQty'), prop: 'fupdateQty', align: 'right', width: '100px' }
      ],
      tableHeader1: []
    }
  },
  watch: {
    fnumber: {
      handler(val) {
        this.proVal.fnumber = val
        this.handleGetUntreated()
      }
    }
  },
  created() {
    this.tableHeader1 = this.tableHeader
    this.tableHeight = window.innerWidth > 1440 ? 'calc(100vh - 220px)' : '70vh'
  },
  methods: {
    // 导出表格
    handleExport() {
      require.ensure([], () => {
        const tHeader = this.tableHeader.map((res) => {
          return res.label
        })
        const filterVal = this.tableHeader.map((res) => {
          return res.prop
        })
        if (this.tableData.length <= 0) {
          this.$message.warning('没有导出数据')
        } else {
          const { fstockId, startTime, endTime, fmaterialId, fnumber, positionname } = this.proVal
          queryStockQtylogList({
            pageSize: 100000,
            pageNum: 1,
            fstockId, startTime, endTime, fmaterialId, fnumber, positionname
          }).then(res => {
            if (res.code === 0) {
              const list = res.data.list
              const data = formatJson(filterVal, list)
              export_json_to_excel(tHeader, data, '物料收发明细表')
            } else {
              this.$confirm(res.message, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'error'
              })
            }
          })
        }
      })
    },
    // 获取物料收发明细表数据
    async handleGetUntreated() {
      const { fstockId, startTime, endTime, fmaterialId, fnumber, positionname } = this.proVal
      const DATA = {
        pageNum: this.currentPage,
        pageSize: this.size,
        fstockId, startTime, endTime, fmaterialId, fnumber, positionname
      }
      const RES = await queryStockQtylogList(DATA)
      this.tableData = RES.data.list
      this.total = RES.data.total
    },
    // 搜索
    handleQuerySonClass() {
      this.currentPage = 1
      this.handleGetUntreated()
    },
    // 进入物料详情
    jumpMateriel(ev) {
      const FNUMBER = ev.FNUMBER
      this.$router.push({ path: `/detailMateriel/${FNUMBER}` })
    },
    // 自定义合计行
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return (Number(prev) + Number(curr)).toFixed(2)
            } else {
              return prev
            }
          }, 0)
        } else {
          sums[index] = ''
        }
      })
      sums.forEach((res, index) => {
        if (Number(sums[index]) > 0) {
          sums[index] = Number(sums[index]).toLocaleString()
        } else {
          sums[index] = ''
        }
      })
      sums[0] = '合计'
      return sums
    }
  }
}
</script>
<style lang="scss" scoped>
.materReceive {
  @include listBom;
  .el-input::v-deep .el-input__inner {
    height: 30px;
    line-height: 30px;
  }
  .el-form {
    display: flex;
    flex-wrap: wrap;

    .el-form-item {
      height: 30px !important;
      width: 268px;
      margin-bottom: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      .btnType {
        margin-right: 20px;
      }

      .el-date-editor.el-input {
        width: 100% !important;
      }

      .el-select {
        width: 100%;
      }
    }
  }
}
</style>
